{extend name="common/base" /}
{block name="body"} 
<main>

    <div class="container layui-row">
        <div class="layui-col-md3 layui-col-xs12 personal-nav">
            <div class="personal-user-name">
                <h1>Welcome Back,<br>Klay!</h1>
                <p class="white-font">15874587454@qq.com</p>
            </div>

            <div class="personal-nav-item">
                <p class="white-font font-size-small">PURCHASE HISTORY</p>
                <div class="unselect-button">
                    <a href="personal-info-all-purchases.html#block">
                        <span>View All Purchases</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>

                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">PROFILE</p>
                <div class="unselect-button">
                    <a href="personal-my-sizes.html#block">
                        <span>My Sizes</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="personal-info.html#block">
                        <span>Personal Info</span>
                        <img src="__ROOT__/static/images/go-white.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="personal-payments.html#block">
                        <span>Payments</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="unselect-button">
                    <a href="personal-address-and-delivery.html#block">
                        <span>Address and Delivery</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
            <div class="personal-nav-item">
                <p class="white-font font-size-small">SECURITY AND COMMUNICATION</p>
                <div class="unselect-button">
                    <a href="/personal-change-password.html#block">
                        <span>Change Password</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
                <div class="select-button">
                    <a href="/personal-subsc-riptions.html#block">
                        <span>Subsc riptions</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>

                <div class="unselect-button margin-top-sign-out">
                    <a href="/login_out.html">
                        <span>Sign Out</span>
                        <img src="__ROOT__/static/images/part2-go.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12 personal-genter" id="block">
            <h1 class="personal-genter-title">Subsc riptions</h1>
            <ul class="layui-row">
                <li class="layui-col-md12 layui-col-xs12">
                    <div class=" input-style slect_dropdown" lay-options="{
                          data: [{title: '1-month subscription', id: 1}, {title: '2-month subscription', id: 2}, {title: '3-month subscription', id: 3}]
                        }">
                        <div class="data-value">Please select</div>
                    </div>

                    <!--<p class="personal-tip">-->
                    <!--    <img src="__ROOT__/static/images/part2-go.png" alt="">-->
                    <!--</p>-->
                    <!--<div class="layui-form my-sizes-check-box">-->
                    <!--    <input class="checkbox-style" type="checkbox" name="1-month subscription" title="1-month subscription">-->
                    <!--    <input class="checkbox-style" type="checkbox" name="2-month subscription" title="2-month subscription">-->
                    <!--    <input class="checkbox-style" type="checkbox" name="3-month subscription" title="3-month subscription">-->
                    <!--</div>-->
                </li>
            </ul>
        </div>
    </div>
</main>
{/block}

{block name="js"} 
<script>
    layui.use(["form"], function () {
            var form = layui.form;
            var layer = layui.layer;
            layui.use(function () {
                var dropdown = layui.dropdown;

                // 批量渲染
                dropdown.render({
                    elem: '.slect_dropdown',
                    className: 'slect_dropdown_box',
                    click: function (data, othis) {
                        window.location.href = '/subsaription.html#subscribe'
                        this.elem.find('.data-value').text(data.title); // 当前组件绑定的目标元素对象，批量绑定中常用

                    }
                });
            });
        });
</script>
{/block}
